<template>
  <common-card class="summary">
    <template #title>学情总结</template>
    <ul class="dimension-list">
      <li class="homework-total">
        <p class="desc">作业布置次数</p>
        <p class="detail">
          <span class="num">{{ summary.homework_count }}</span
          ><span class="suffix">次</span>
        </p>
      </li>
      <li class="submit-rate-average">
        <p class="desc">平均提交率</p>
        <p class="detail">
          <span class="num">{{ getPercent(summary.commit_rate) }}</span
          ><span class="suffix">%</span>
        </p>
      </li>
      <li class="right-rate-average">
        <p class="desc">平均正确率</p>
        <p class="detail">
          <span class="num">{{ getPercent(summary.right_rate) }}</span
          ><span class="suffix">%</span>
        </p>
      </li>
      <li class="time-average">
        <p class="desc">平均作答时长</p>
        <p class="detail">
          <template v-if="getTime[0] > 0">
            <span class="num">{{ getTime[0] }}</span
            ><span class="suffix">小时</span>
          </template>
          <span class="num">{{ getTime[1] }}</span
          ><span class="suffix">分钟</span>
        </p>
      </li>
      <li class="average-num">
        <p class="desc">人均题数</p>
        <p class="detail">
          <span class="num">{{
            summary.mean_question_count
              ? parseFloat(summary.mean_question_count.toFixed(1))
              : 0
          }}</span
          ><span class="suffix">道/人</span>
        </p>
      </li>
      <li class="coverage-points">
        <p class="desc">覆盖知识点数</p>
        <p class="detail">
          <span class="num">{{ summary.knowledge_count }}</span>
          <span class="suffix">个</span>
        </p>
      </li>
      <li class="mastering-points">
        <p class="desc">优势知识点数</p>
        <p class="detail">
          <span class="num">{{ summary.good_knowledge_count }}</span
          ><span class="suffix">个</span>
        </p>
      </li>
      <li class="weak-points">
        <p class="desc">薄弱知识点数</p>
        <p class="detail">
          <span class="num">{{ summary.weak_knowledge_count }}</span
          ><span class="suffix">个</span>
        </p>
      </li>
    </ul>
    <p class="tip">
      所选时间内，该年级共布置<span class="bold">{{
        summary.homework_count
      }}</span
      >次作业， 每班平均布置<span class="bold">{{
        summary.mean_homework_count
      }}</span
      >次作业，
      <span class="bold">{{ summary.most_class_count?.class_name || '-' }}</span
      >布置次数最多（<span class="bold">{{
        summary.most_class_count?.count || 0
      }}</span
      >次），
      <span class="bold">{{
        summary.least_class_count?.class_name || '-'
      }}</span
      >作业布置次数最少（<span class="bold">{{
        summary.least_class_count?.count || 0
      }}</span
      >次）； 作业共覆盖<span class="bold">{{ summary.knowledge_count }}</span
      >个知识点， 优势知识点<span class="bold">{{
        summary.good_knowledge_count
      }}</span
      >个，薄弱知识点<span class="bold">{{ summary.weak_knowledge_count }}</span
      >个， 整体掌握情况为<span class="bold">{{
        getLevel(summary.right_rate)
      }}</span
      >。
    </p>
  </common-card>
</template>
<script setup>
import { useSituationReport } from '@/stores/situation-report'
import { ref, watchEffect, computed } from 'vue'
import CommonCard from '../components/CommonCard.vue'
import { getGradeSummary } from '@/apis/situation-report/index'
import { getLevel, getPercent } from '../utils'
const situationReport = useSituationReport()
const summary = ref({
  homework_count: 0,
  commit_rate: 0,
  correct_rate: 0,
  right_rate: 0,
  mean_question_count: 0,
  mean_homework_count: 0,
  knowledge_count: 0,
  weak_knowledge_count: 0,
  good_knowledge_count: 0,
  mean_time: 0,
  most_class_count: {
    class_name: '',
    count: 0
  },
  least_class_count: {
    class_name: '',
    count: 0
  }
})
const getSummary = async () => {
  const { data } = await getGradeSummary(situationReport.search)
  summary.value = { ...data }
  summary.value.most_class_count = data?.most_class_count
    ? { ...data.most_class_count[0] }
    : {}
  summary.value.least_class_count = data?.least_class_count
    ? { ...data.least_class_count[0] }
    : {}
}

const getTime = computed(() => {
  const hours = Math.floor(summary.value.mean_time / 3600)
  const minutes = Math.ceil((summary.value.mean_time % 3600) / 60)
  return [hours, minutes]
})

watchEffect(() => {
  if (
    situationReport.search.class_id ||
    situationReport.search.grade_id ||
    situationReport.search.subject_id
  ) {
    getSummary()
  }
})
</script>
<style lang="less" scoped>
.summary {
  .dimension-list {
    display: flex;
    flex-wrap: wrap;
    gap: @gap;

    li {
      list-style-type: none;
      width: 234px;
      height: 136px;
      padding: 24px 0 0 20px;

      .desc {
        font-weight: 500;
      }

      .detail {
        margin-top: 8px;
      }

      .num {
        font-size: 32px;
        font-weight: 800;
      }
    }

    .homework-total {
      background: url('@/assets/images/situation-report/homework-total.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .submit-rate-average {
      background: url('@/assets/images/situation-report/submit-rate-average.png')
        no-repeat center/cover;

      * {
        color: #513305;
      }
    }

    .complete-rate-average {
      background: url('@/assets/images/situation-report/complete-rate-average.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .right-rate-average {
      background: url('@/assets/images/situation-report/right-rate-average.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .time-average {
      background: url('@/assets/images/situation-report/time-average.png')
        no-repeat center/cover;

      * {
        color: #514005;
      }
    }

    .average-num {
      background: url('@/assets/images/situation-report/average-num.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .coverage-points {
      background: url('@/assets/images/situation-report/coverage-points.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .mastering-points {
      background: url('@/assets/images/situation-report/mastering-points.png')
        no-repeat center/cover;

      * {
        color: #514005;
      }
    }

    .weak-points {
      background: url('@/assets/images/situation-report/weak-points.png')
        no-repeat center/cover;

      * {
        color: #513305;
      }
    }
  }

  .tip {
    margin-top: 24px;
    padding: 8px 12px;
    background: #f6f8fe;
    border-radius: 16px;

    .bold {
      font-weight: 700;
    }
  }
}
</style>
